<script setup>
	import {inject, onMounted, ref, shallowRef} from "vue";
	import { getProductPage } from '@/api/product.js'
	import emitter from "@/utils/mitt.js";
	const getAssetsFile = inject("getAssetsFile")
	
	const props = defineProps({
		// 是否独立展示
		showAlone: {
			type: Boolean,
			default: true
		}
	})
	
	const changePath = (path, query = null) => {
		emitter.emit('changePath', {
			path: path,
			query: query
		})
	}

	const productList = ref([])
	const total = ref(0)
	const pages = ref(0)
	const queryParams = ref({
		pageSize: 16,
		pageNum: 1
	})
	
	const getProductList = async () => {
		const res = await getProductPage({
			...queryParams.value,
			isView: 1,
			articleColumnId: 4
		})
		if(res.data.code === 200) {
			productList.value = res.data.data.records.map(e => {
				return {
					...e,
					img: e.titleFiles?.length ? e.titleFiles[0].accessUrl : null
				}
			})
			total.value = res.data.data.total;
			pages.value = res.data.data.pages;
		}
	}
	
	onMounted(()=>{
		getProductList()
	})

	const toProductDetail = (id) => {
		changePath('/index/product/productList/detail', {id})
	}
</script>

<template>
	<div :class="props.showAlone ? 'pageContent' : null">
		<n-space
			align="center"
			justify="space-between"
			style="margin-bottom: 20px"
		>
			<n-h6 class="pageTitle" prefix="bar">
				<div>产品列表</div>
			</n-h6>
			<!-- <n-button
				v-if="!props.showAlone"
				text
				:color="'#999'"
				@click="changePath('/index/product/productList')"
			>
				查看更多>>
			</n-button> -->
		</n-space>
		<n-divider
			class="pageDivider"
		></n-divider>
		
		<n-grid
			:cols="4"
			:x-gap="30"
			:y-gap="40"
			style="margin-bottom: 20px"
		>
			<n-gi
				:span="1"
				v-for="item in productList"
			>
				<div
					style="width: 100%;cursor: pointer"
					@click="toProductDetail(item.id)"
				>
					<img
						:src="item.img || getAssetsFile('img/content/empty.png')"
						style="height: 180px; width: 280px; margin-bottom: 10px"
					>
					<div style="text-align: center">{{item.title}}</div>
				</div>
			</n-gi>
		</n-grid>
		
		<n-space justify="center">
			<n-pagination
				show-quick-jumper
				:page-count="pages"
				v-model:page-size="queryParams.pageSize"
				v-model:page="queryParams.pageNum"
				:onUpdate:page="getProductList">
				<template #prefix>共{{ total }}条</template>
				<template #suffix>页</template>
			</n-pagination>
		</n-space>
	</div>
</template>

<style scoped>
</style>
